<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true" :bgColorStyle="theme">
			<block slot="backText">{{$t("返回")}}</block>
			<block slot="content">{{$t("主子表DEMO")}}</block>
		</cu-custom>
		<scroll-view scroll-x class="bg-white nav text-center fixed" :style="[{top:CustomBar + 'px'}]">
			<view class="cu-item" :style="{color:index==TabCur?theme:''}" :class="index==TabCur?'cur':''" v-for="(item,index) in tabNav"
			 :key="index" @tap="tabSelect" :data-id="index">
				{{tabNav[index]}}
			</view>
		</scroll-view>
		<form @submit="save" style='display:block;margin-top:90rpx' v-if='main != null'>
			<view id='main' v-show='TabCur == 0'>
				<js-input labelName='单行文本' path='testInput' :value='main.testInput'></js-input>
				<js-textarea labelName='多行文本' path='testTextarea' :value='main.testTextarea'></js-textarea>
				<js-select labelName='下拉框' dictType="sys_menu_type" path='testSelect' :value='main.testSelect'></js-select>
				<js-checkbox labelName='下拉多选' dictType="sys_menu_type" path='testSelectMultiple' :value='main.testSelectMultiple'></js-checkbox>
				<js-select labelName='单选框' dictType="sys_menu_type" path='testRadio' :value='main.testRadio'></js-select>
				<js-checkbox labelName='复选框' dictType="sys_menu_type" path='testCheckbox' :value='main.testCheckbox'></js-checkbox>
				<js-input labelName='日期选择' mode='date' path='testDate' :value='main.testDate'></js-input>
				<js-input labelName='日期时间' mode='datetime' path='testDatetime' :value='main.testDatetime'></js-input>
				<js-tree-select :value='main.testUser.userCode' :labelValue='main.testUser.userName' url='a/sys/office/treeData?isLoadUser=true' labelName="用户选择 : " path="testUser.userCode" labelPath="testUser.userName"></js-tree-select>
				<js-tree-select :value='main.testOffice.officeCode' :labelValue='main.testOffice.officeName' url='a/sys/office/treeData' labelName="机构选择 : " path="testOffice.officeCode" labelPath="testOffice.officeName"></js-tree-select>
				<js-tree-select :value='main.testAreaCode' :labelValue='main.testAreaName' url='a/sys/area/treeData' labelName="区域选择 : " path="testAreaCode" labelPath="testAreaName"></js-tree-select>
				<js-textarea labelName='备注' path="remarks" :value='main.remarks'></js-textarea>
				<js-image-upload bizType="testData_image" imageDel="testData_image__del" bizKey="1148170340563320832"></js-image-upload>
				<js-file-upload bizType="testData_file" fileDel="testData_file__del" bizKey="1148170340563320832"></js-file-upload>
			</view>
			<view id='sub' v-show='TabCur == 1'>
				<view v-for="(val,ind) in subList" :key="val.key">
					<view class="cu-bar bg-white solid-bottom margin-top" @tap.stop="toggleItem(ind)">
						<view class="action">
							{{val.show ? '点击这里折叠':'点击这里展开'}}
						</view>
						<view class="action">
							<view class="cuIcon-deletefill" @tap.stop="deleteItem(ind)">

							</view>
						</view>
					</view>
					<view v-show='val.show'>
						<js-input labelName='单行文本' :value='subList[ind].testInput' :path="'testDataChildList[' + ind + '].testInput'"></js-input>
						<js-textarea labelName='多行文本' :value='subList[ind].testTextarea' :path="'testDataChildList[' + ind + '].testTextarea'"></js-textarea>
						<js-select labelName='下拉框' :value='subList[ind].testSelect' :path="'testDataChildList[' + ind + '].testSelect'" dictType="sys_menu_type"></js-select>
						<js-checkbox labelName='下拉多选' :value='subList[ind].testSelectMultiple' :path="'testDataChildList[' + ind + '].testSelectMultiple'" dictType="sys_menu_type"></js-checkbox>
						<js-select labelName='单选框' :value='subList[ind].testRadio' :path="'testDataChildList[' + ind + '].testRadio'" dictType="sys_menu_type"></js-select>
						<js-checkbox labelName='复选框' :value='subList[ind].testCheckbox' :path="'testDataChildList[' + ind + '].testCheckbox'" dictType="sys_menu_type"></js-checkbox>
						<js-input labelName='日期选择' :value='subList[ind].testDate' :path="'testDataChildList[' + ind + '].testDate'" mode='date'></js-input>
						<js-input labelName='日期时间' :value='subList[ind].testDatetime' :path="'testDataChildList[' + ind + '].testDatetime'" mode='datetime'></js-input>
						<js-tree-select :value='subList[ind].testUser.userCode' :labelValue='subList[ind].testUser.userName' :path="'testDataChildList['+ind+'].testUser.userCode'" :labelPath="'testDataChildList['+ind+'].testUser.userName'"
						 url='a/sys/office/treeData?isLoadUser=true' labelName="用户选择 : "></js-tree-select>
						<js-tree-select :value='subList[ind].testOffice.officeCode' :labelValue='subList[ind].testOffice.officeName' :path="'testDataChildList['+ind+'].testOffice.officeCode'" :labelPath="'testDataChildList['+ind+'].testOffice.officeName'"
						 url='a/sys/office/treeData' labelName="机构选择 : "></js-tree-select>
						<js-tree-select :value='subList[ind].testAreaCode' :labelValue='subList[ind].testAreaName' :path="'testDataChildList['+ind+'].testAreaCode'" :labelPath="'testDataChildList[' + ind + '].testAreaName'"
						 url='a/sys/area/treeData' labelName="区域选择 : "></js-tree-select>
						<js-textarea :path="'testDataChildList[' + ind + '].remarks'" labelName='备注'></js-textarea>
					</view>
				</view>
				<view style='text-align: center;font-size: 30rpx;' :style="{padding:subList.length > 0 ? '30rpx' : '50rpx'}">
					<text class="text-black expand" @tap.stop='addItem()' :style="{color:theme}">点击这里添加子项</text>
				</view>
			</view>
			<button v-if="tabNav.indexOf('主项') != -1" class="margin-top text-white" :style="{backgroundColor:theme}" form-type="submit">保存</button>
		</form>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				TabCur: 0,
				tabNav: ['主项', '子项'],
				main: null,
				subList: [],
			}
		},
		computed: {
			...mapState(["theme"])
		},
		mounted() {
			/* this.get('1358632213327491072'); */
			this.main = {
				testUser:{},
				testOffice:{}
			}
		},
		methods: {
			// 单选?
			// 多选?
			// 可以选择父级节点?
			// 是否返回全路径
			// 保存
			save(e) {
				let formData = e.detail.value
				formData.id = ""
				console.log(formData)
				this.$request({
					url: "a/test/testData/save",
					data: formData,
					success:(res)=>{
						console.log(res.data)
						uni.showModal({
							title: '提示',
							content: res.data.message,
							showCancel: false,
							cancelText: '取消',
							confirmText: '确认',
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
					}
				})
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			addItem() {
				let newItem = {}
				newItem.show = true
				newItem.key = new Date().getTime()
				newItem.testUser={}
				newItem.testOffice={}
				this.subList.push(newItem)
			},
			deleteItem(ind) {
				// 删除子项
				uni.showModal({
					content: '确认删除这一项',
					success: (res) => {
						if (res.confirm) {
							this.subList.splice(ind, 1)
						}
					}
				})
			},
			toggleItem(ind) {
				this.$set(this.subList[ind], 'show', !this.subList[ind].show)
			},
			get(id) {
				this.$request({
					url: "a/test/testData/get?id=1358632213327491072",
					method: 'GET',
					success: (res) => {
						this.main = res.data
						this.subList = this.main.testDataChildList
					}
				})
			}
		}
	}
</script>
<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
</style>
